<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>举报页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/layer/3.1.0/mobile/need/layer.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.0/mobile/layer.js"></script>
    <script src="./js/lrz.bundle.js"></script>
</head>
<body style="background-color: #dcdede">
<div class="container-fluid">
    <form role="form">
        <h2 style="text-align: center">胶东街道网格化管控中心</h2>
        <h3 style="text-align: center;color: #545353;margin-top: 30px;">河道隐患举报</h3>
        <div class="form-group">
            <label for="name">举报描述:</label>
            <textarea class="form-control" id="content" name="content" rows="8"
                      placeholder="请输入举报内容"></textarea>
        </div>
        <!--上传图片开始-->

        <label for="name">拍照:</label>
        <!--    照片添加    -->
        <div class="z_photo">
            <div class="z_file">
                <input type="file" capture="camera" name="file" id="file" value="" accept="image/*"  onclick="showActionSheet()"
                       onchange="imgChange('z_photo','z_file');"/>
            </div>

        </div>

        <!--遮罩层-->
        <div class="z_mask">
            <!--弹出框-->
            <div class="z_alert">
                <p>确定要删除这张图片吗？</p>
                <p>
                    <span class="z_cancel">取消</span>
                    <span class="z_sure">确定</span>
                </p>
            </div>
        </div>
        <script type="text/javascript">
            //px转换为rem
            (function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if (clientWidth >= 640) {
                            docEl.style.fontSize = '100px';
                        } else {
                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                        }
                    };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
            var num = 0;
            
            function imgChange(obj1, obj2) {
                //获取点击的文本框
                var file = document.getElementById("file");
                /* 压缩图片 */

                //存放图片的父级元素
                var imgContainer = document.getElementsByClassName(obj1)[0];
                //获取的图片文件
                var fileList = file.files;

                //文本框的父级元素
                var input = document.getElementsByClassName(obj2)[0];
                var imgArr = [];
                //遍历获取到得图片文件
                num += fileList.length;
                if (num > 2 || fileList.length > 2) {
                    layer.open({
                        content: '最多上传2张'
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    num -= 1;
                    return false;
                }
                for (var i = 0; i < fileList.length; i++) {
                    lrz(file.files[i], {
                        width: 300 //设置压缩参数
                    }).then(function (rst) {
                        /* 处理成功后执行 */
                        rst.formData.append('base64img', rst.base64); // 添加额外参数
                        $.ajax({
                            url: 'http://' + "<?php echo $_SERVER['HTTP_HOST']?>" + '/weixin/dataHandel.php?river_id=4&fun=saveUploadImg',
                            type: "POST",
                            data: rst.formData,
                            dataType: 'json',
                            processData: false,
                            contentType: false,
                            success: function (data) {
                                var pic = $("#pic").val();
                                if (pic.length == 0) {
                                    $('#pic').val(data.path)
                                } else {
                                    $('#pic').val(pic + ',' + data.path)
                                }
                                if (data.code > 0) {
                                    layer.open({
                                        content: '上传成功'
                                        , skin: 'msg'
                                        , time: 2 //2秒后自动关闭
                                    });
                                    return false;
                                } else {
                                    layer.open({
                                        content: '上传失败'
                                        , skin: 'msg'
                                        , time: 2 //2秒后自动关闭
                                    });
                                    return false;
                                }
                            }
                        });
                    }).catch(function (err) {
                        /* 处理失败后执行 */
                    }).always(function () {
                        /* 必然执行 */
                    });
                    var imgUrl = window.URL.createObjectURL(file.files[i]);
                    imgArr.push(imgUrl);
                    var img = document.createElement("img");
                    img.setAttribute("src", imgArr[i]);
                    var imgAdd = document.createElement("div");
                    imgAdd.setAttribute("class", "z_addImg");
                    imgAdd.appendChild(img);
                    imgContainer.appendChild(imgAdd);
                }
                ;
                imgRemove();
            }; //结束

            function imgRemove() {

                var imgList = document.getElementsByClassName("z_addImg");
                var mask = document.getElementsByClassName("z_mask")[0];
                var cancel = document.getElementsByClassName("z_cancel")[0];
                var sure = document.getElementsByClassName("z_sure")[0];
                for (var j = 0; j < imgList.length; j++) {
                    imgList[j].index = j;
                    imgList[j].onclick = function () {
                        var t = this;
                        mask.style.display = "block";
                        cancel.onclick = function () {
                            mask.style.display = "none";
                        };
                        sure.onclick = function () {
                            num = num - 1;
                            mask.style.display = "none";
                            t.style.display = "none";
                        };

                    }
                }
                ;
            };

        </script>
        <!--上传图片结束-->

        <label for="name">选择河段:</label>
        <select class="form-control" name="river_id" style="max-width:150em " id="river_id">

            <option <?php if (isset($_GET['river_id']) && $_GET['river_id'] == 1) { ?>selected="selected"<?php } ?>
                    value="1">大沽河
            </option>
            <option <?php if (isset($_GET['river_id']) && $_GET['river_id'] == 2) { ?>selected="selected"<?php } ?>
                    value="2">南胶莱河
            </option>
            <option <?php if (isset($_GET['river_id']) && $_GET['river_id'] == 3) { ?>selected="selected"<?php } ?>
                    value="3">碧水河
            </option>
            <option <?php if (isset($_GET['river_id']) && $_GET['river_id'] == 4) { ?>selected="selected"<?php } ?>
                    value="4">鲤鱼沟
            </option>
            <option <?php if (isset($_GET['river_id']) && $_GET['river_id'] == 5) { ?>selected="selected"<?php } ?>
                    value="5">麻湾河
            </option>
        </select>
        <?php if (isset($_GET['id'])) { ?>
            <input type="hidden" value="<?php echo $_GET['id'] ?>" name="open_id" id="open_id">
        <?php } ?>
        <input type="hidden" value="" name="pic" id="pic">
        <button type="button" class="btn btn-primary btn-lg btn-block btn-add" id="sub" style="margin-top: 50px;">提交
        </button>
    </form>
</div>
<script>
    var is_submit = false;  //限制提交频率
    $(document).ready(function () {
        $(document).on('click', '.btn-add', function () {
            var content = $("#content").val(), open_id = $('#open_id').val(), river_id = $('#river_id').val(),
                pic = $('#pic').val();
            var url = 'http://' + "<?php echo $_SERVER['HTTP_HOST']?>" + '/weixin/dataHandel.php?river_id=4&fun=addComplainData';
            var dataPost = {content: content, open_id: open_id, river_id: river_id, pic: pic};
            if (content.length <= 0) {
                layer.open({
                    content: '请填写举报内容'
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
                return false;
            }
            if (is_submit) {
                layer.open({
                    content: '5分钟内只能提交一次'
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
                return false;
            }
            $.ajax({
                url: url,
                dataType: 'json',
                type: 'post',
                data: dataPost,
                cache: false,
                async: true,
                beforeSend: function (XMLHttpRequest) {
                    $('#sub').removeClass('btn-add');
                },
                complete: function (XMLHttpRequest) {
                    // layer.open({
                    //     type: 2
                    //     ,content: '提交中...',
                    //     shadeClose:false
                    // })
                    // layer.closeAll(); //疯狂模式，关闭所有层
                    $('#sub').addClass('btn-add');
                },
                success: function (json) {
                    if (json.status > 0) {
                        var url = 'http://' + "<?php echo $_SERVER['HTTP_HOST']?>" + '/weixin/success.html';
                        window.location.href = url;
                        is_submit = true;
                    } else {
                        layer.open({
                            content: json.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                    }
                },
                error: function () {
                    layer.open({
                        content: '请求失败,请稍后重试....'
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                }
            });
            // 模拟1s的加载过程
            setTimeout(function () {
                // 重置加载flag
                is_submit = false;
            }, 50000);
        });
    });

</script>
</body>
</html>